<template>
	<div class="userBg">
		<div class="container">
			<h2 class="textTlt">{{student}}</h2>
			<div class="photoList">
				<div class="item" @click="addImg">
					<div class="iconBox">
						<u-icon name="plus-circle" size="80"></u-icon>
					</div>
				</div>
				<div class="item" v-for="(item,index) in list" :key="index">
					<div class="imgBox" :style="'background-image:url(' + item.img + ')'"></div>
				</div>
			</div>
		</div>
		
		<div class="loadBox" v-if="searchLoading">
			<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
		</div>
		
		<div class="popup" v-if="showPrivacy">
			<div class="popcontent">
				<view class="privacyTit">用户隐私保护提示</view>
				<div class="poptext">感谢您的使用，在使用本小程序前，应当阅读并同意<text
						@click="handleOpenPrivacyContract">《用户隐私保护指引》</text>。当您点击同意并开始使用程序服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。
				</div>
				<div class="btns">
					<div class="btn"><u-button shape="circle" @tap="showPrivacy = false">不同意并退出</u-button></div>
					<div class="btn"><u-button type="error" shape="circle" id="agree-btn"
							open-type="agreePrivacyAuthorization"
							@click="handleAgreePrivacyAuthorization">同意并继续</u-button></div>
				</div>
			</div>
		</div>
		
		<canvas canvas-id="waterMark" class="waterMark" style="width: 100vw; height: 100vh;"></canvas>
		<image :src="waterMarkUrl" class="waterMark-bg" style="width: 100vw; height: 100vh;"></image>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				banner: 'https://www.baixuemianshi.com/zhuanti/tiku/images/banner.jpg?' + new Date(),
				waterMarkUrl: "",
				windowWidth: 100,
				windowHeight: 100,
				xbls:"",
				student:"",
				searchLoading: true,
				list:[],
				showPrivacy: false,
			}
		},
		onShow() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'hidden',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		onHide() {
			if(wx.setVisualEffectOnCapture){
			    wx.setVisualEffectOnCapture({
			        visualEffect: 'none',
			        success:(res) => {
			            console.log('success回调',res)
			        },
			    })
			}
		},
		onLoad(options) {
			
			if (wx.getPrivacySetting) {
				wx.getPrivacySetting({
					success: res => {
						if (res.needAuthorization) {
							this.showPrivacy = true
						} else {
						}
					},
					fail: () => {},
					complete: () => {}
				})
			}
			
			this.xbls = options.xbls
			this.student = options.student
			this.getPhotos(0)
			
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
		created() {
			let that = this;
			
			
		},
		mounted() {
			let that = this 
			if(this.userphone){
				this.drawWaterMark(this.userphone);
			}else{
				this.drawWaterMark('雪恒教育-白雪面试');
			}
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone','LogSetOpenid']),
			drawWaterMark(text) {
				this.getDeviceInfo().then(response => {
					const w = response.windowWidth;
					const h = response.windowHeight;
					this.windowWidth = w;
					this.windowHeight = h;
					//创建canvas绘制上下文
					const canvas = uni.createCanvasContext("waterMark", this);
					canvas.clearRect(0, 0, w, h)
					//开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
					canvas.beginPath();
					canvas.setFontSize(18);
					canvas.setFillStyle('rgba(0, 0, 0, 0.1)');
					canvas.rotate(-30 * Math.PI / 180)
					if (text) {
						text = this.trim(text)
					}
					const maxWidth = text.length * 18
					for (let x = 0; x < 10; x++) {
						for (let y = 0; y < 20; y++) {
							//在画布上绘制被填充的文本。
							canvas.fillText(text, (maxWidth + 40) * x - 400, 90 * y + 20);
						}
					}
					//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
					canvas.draw(false, () => {
						//把当前画布指定区域的内容导出生成指定大小的图片
						uni.canvasToTempFilePath({
							canvasId: "waterMark",
							complete: (res) => {
								this.waterMarkUrl = res.tempFilePath
							}
						}, this)
					})
				});
			},
			trim(str) {
				let trimStr = '';
				const reg = /[\t\r\f\n\s]*/g;
				if (typeof str === 'string') {
					trimStr = str.replace(reg, '');
				}
				return trimStr
			},
			/**
			 * 获取当前设备的信息
			 * **/
			getDeviceInfo() {
				return new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: (sysInfo) => {
							resolve(sysInfo)
						}
					})
				})
			},
			handleAgreePrivacyAuthorization() {
				this.showPrivacy = false
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			getPhotos(page){
				let that = this
				db.collection('24gk_photos').skip(20 * page ).limit(20).where({
					xbls:that.xbls,
					student:that.student
				}).get({
					success: res => {
						if(res.data.length > 0){
							that.list = that.list.concat(res.data)
							let p = page + 1
							that.getPhotos(p)
						}else{
							that.searchLoading = false
						}
						
					}
				})
			},
			addImg(){
				var that = this;
				
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths
						that.imgs = tempFilePaths
						that.upLoadImage()
						
					},
					fail:function(req){
						console.log(req)
					}
				})
			},
			upLoadImage() {
				let that = this
				wx.showLoading({
					title: '图片上传中',
				})
				uni.uploadFile({
					url: "https://www.baixuemianshi.com/zhuanti/upload_img/xcx2.php",
					filePath: that.imgs[0],
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						let status = JSON.parse(res.data) 
						if(status.status == 'success'){
							let link = 'https://www.baixuemianshi.com/zhuanti/upload_img/upload/' + status.data
							that.addPath(link)
						}else{
							uni.showToast({
								icon:"error",
								title:"上传失败"
							})
						}  
					}
				})
				wx.hideLoading();
			},
			addPath(link){
				let that = this
				db.collection('24gk_photos').add({
					data: {
						img: link,
						xbls: that.xbls,
						student: that.student
					},
					success: res => {
						that.list.push({
							img: link,
							xbls: that.xbls,
							student: that.student
						})
					}
				})
			},
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(./index.css);
</style>